<template>
  <div class="container">
    <div class="header">
      <h1>
        我的计划与成绩
        <span class="func" @click="exportScoreTable">导出成绩单</span>
      </h1>
    </div>
    <div class="content" style="text-align: left">
      <a-tabs default-active-key="1" @change="changeTab">
        <a-tab-pane key="1" tab="我的成绩">
          <a-row>
            <a-col span="6" style="text-align: center">
              必修已获得学分: {{ creditCompulsory }} / {{ totalCompulsory }}
            </a-col>
            <a-col span="6" style="text-align: center">
              公选已获得学分: {{ creditPublicOptional }} / {{ totalPublicOptional }}
            </a-col>
            <a-col span="6" style="text-align: center">
              专选已获得学分: {{ creditMajorOptional }} / {{ totalMajorOptional }}
            </a-col>
            <a-col span="6" style="text-align: center">
              加权平均: {{ weightedAverage }}
            </a-col>
          </a-row>
          <br>
          <a-table class="score-table" :pagination="false" :bordered="true" :columns="columns" :data-source="scores"></a-table>
        </a-tab-pane>
        <a-tab-pane key="2" tab="培养计划">
          <h1 style="color: red">{{ trainingPlanName }}</h1>
          <a-table :pagination="false" :bordered="true" :columns="trainingPlanColumns" :data-source="trainingPlans"></a-table>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script>
import getScore from "@/api/students/score";
import getTrainingPlan from "@/api/students/trainingPlan";
import {columns} from "@/pages/student/js/scoreQuery";
import schoolWork from "@/api/students/schoolWork";

export default {
  data() {
    return {
      creditCompulsory: 0, // 必修已获得学分
      totalCompulsory: 0,
      creditPublicOptional: 0, // 公选已获得学分
      totalPublicOptional: 0,
      creditMajorOptional: 0, // 专选已获得学分
      totalMajorOptional: 0,
      weightedAverage: 0, // 加权平均
      columns: [],     // 表格标题
      scores: [],
      trainingPlanColumns: [],
      trainingPlans: [],
      trainingPlanName: ""
    };
  },
  methods: {
    loadScore() {
      getScore().then(res => {
        if (res.result) {
          this.scores = res.data.scores;
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    loadTrainingPlan() {
      let self = this;
      getTrainingPlan().then(res => {
        if (res.result) {
          self.trainingPlans = res.trainingPlans;
          self.trainingPlanName = res.name;
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    changeTab(id) {
      if (id === "2") {
        this.loadTrainingPlan();
      } else {
        this.loadScore();
      }
    },
    loadSchoolWork() {
      schoolWork().then(res => {
        if (res.result) {
          this.creditCompulsory = res.data.creditCompulsory;
          this.creditPublicOptional = res.data.creditPublicOptional;
          this.creditMajorOptional = res.data.creditMajorOptional;
          this.totalCompulsory = res.data.totalCompulsory;
          this.totalPublicOptional = res.data.totalPublicOptional;
          this.totalMajorOptional = res.data.totalMajorOptional;
          this.weightedAverage = res.data.weightedAverage;
        }
      })
    },
    exportScoreTable() {
      this.$message.info("该功能即将上线!!!");
    }
  },
  mounted() {
    this.loadScore();
    this.columns = columns.scoreColumns;
    this.trainingPlanColumns = columns.trainingPlanColumns;
    this.loadSchoolWork();
  }
}
</script>

<style scoped>
.score-table{
  width: 70%;
  margin: auto;
}

.func {
  font-size: small;
  color: blue;
  cursor: pointer;
}
</style>

<style scoped src="./css/common.css"></style>